<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="/WEB-INF/googlemaps.tld" prefix="googlemaps"%>
<%@taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>

<!-- becomes the css class of the li element -->
<c:set var="tab_ships" value="active" scope="request" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ships</title>
<script
	src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAALUH_pcJpJzUxKa34zOTlrRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTGYWW_rjWc6kzdcZqyfYkFoYzyig"
	type="text/javascript"></script>

<script src="<c:url value='js/markermanager.js'/>"
	type="text/javascript"></script>

<googlemaps:map id="map" width="80%" height="300" version="2"
	type="normal" zoom="6">
	<googlemaps:key domain="http://localhost"
		key="ABQIAAAALUH_pcJpJzUxKa34zOTlrRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTGYWW_rjWc6kzdcZqyfYkFoYzyig" />
	<googlemaps:panControl enable="true" />
	<googlemaps:panControl enable="true" />
	<googlemaps:wheelControl enable="true" />
	<googlemaps:zoomControl enable="true" />
</googlemaps:map>

<googlemaps:scripttag id="map" scope="site" />
<googlemaps:javascript id="map"></googlemaps:javascript>

<script type="text/javascript">
	var mgr = null;
	var markers = [];

	function clearMap() {
		mgr = new MarkerManager(map);
		markers = [];
		map.clearOverlays();
	}

	function addMarker(lat, lon, context, blue) {
		var point = new GLatLng(lat, lon);
		var pinIcon = new GIcon(G_DEFAULT_ICON);
		pinIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
		pinIcon.iconSize = new GSize(32, 32);
		pinIcon.shadowSize = new GSize(37, 32);
		pinIcon.iconAnchor = new GPoint(9, 32);
		pinIcon.infoWindowAnchor = new GPoint(9, 2);

		if (blue == true) {
			pinIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
		} else {
			pinIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
		}

		var markerOptions = {
			title : context,
			icon : pinIcon
		};
		markers.push(new GMarker(point, markerOptions));
		map.setCenter(point, 4);
	}

	function showOnMap() {
		mgr.addMarkers(markers, 4);
		mgr.refresh();
	}
</script>

<script type="text/javascript">
	// Create business logic in a YUI sandbox using the 'io' and 'json' modules
	YUI().use(
			"node",
			"io",
			"dump",
			"json-parse",
			function(Y) {

				// Create the io callback/configuration
				var callback = {

					timeout : 3000,

					on : {
						success : function(x, o) {
							Y.log("RAW JSON DATA: " + o.responseText);

							var messages = [], html = '', i, l;

							// The returned data was parsed into an array of objects.
							// Add a P element for each received message
							clearMap();

							// Process the JSON data returned from the server
							try {
								messages = Y.JSON.parse(o.responseText);
							} catch (e) {
								// alert("JSON Parse failed!");
								return;
							}

							Y.log("PARSED DATA: " + Y.Lang.dump(messages));

							for (i = 1, l = messages.length; i < l; ++i) {
								addMarker(messages[i].lat, messages[i].lon,
										messages[i].context, false);
							}

							if (messages[0].context != 'null') {
								addMarker(messages[0].lat, messages[0].lon,
										messages[0].context, true);
							}

							showOnMap();
						},

						failure : function(x, o) {
							alert("Async call failed!");
						}

					}
				};

				var images = Y.all('.showOnMapImg');
				images.each(function() {
					var shipId = this.getAttribute("shipId");
					this.on('click', function(e) {
						// Make the call to the server for JSON data
						Y.io("shiproute.htm?shipId=" + shipId, callback);
						Y.io("currentroute.htm?shipId=" + shipId);
					});
				});
			});
</script>

</head>

<body>

	<sec:authorize ifAnyGranted="ROLE_ADMIN">
		<a href="<c:url value='shipedit.htm'/>">Add Ship</a>
	</sec:authorize>

	<display:table uid="ship" name="${ships}" defaultsort="1"
		defaultorder="ascending" pagesize="10" class="dt">
		<display:column property="name" title="Ship Name" maxLength="60" />
		<display:column property="shipType" title="Ship Type" maxLength="15" />
		<display:column property="totalCapacity" title="Total Capacity"
			maxLength="10" />
		<display:column property="payload" title="Payload" maxLength="10" />
		<display:column property="length" title="Length" maxLength="10" />
		<display:column property="draft" title="Draft" maxLength="10" />
		<display:column property="speed" title="Speed" maxLength="10" />
		<display:column property="fuel" title="Fuel" maxLength="30" />
		<display:column>

			<a href="<c:url value='currentroute.htm?shipId=${ship.id}'/>"><img
				src="<c:url value='images/show-route.png' />"/>
			</a>

			<img class="showOnMapImg" shipId="${ship.id}"
				src="<c:url value='images/show-map.png'/>"/>

			<sec:authorize ifAnyGranted="ROLE_ADMIN">
				<a href="<c:url value='shipedit.htm?shipId=${ship.id}'/>"><img
					src="<c:url value='images/edit.png'/>" /></a>
				<a href="<c:url value='crewedit.htm?shipId=${ship.id}'/>"><img
					src="<c:url value='images/members.png'/>" /></a>

			</sec:authorize>
		</display:column>

		<display:setProperty name="basic.empty.showtable" value="true" />
		<display:setProperty name="paging.banner.group_size" value="10" />
		<display:setProperty name="paging.banner.item_name" value="ship" />
		<display:setProperty name="paging.banner.item_names" value="ships" />
		<display:setProperty name="paging.banner.onepage"
			value="<span class='pagelinks'>&nbsp;</span>" />
	</display:table>

	<display:table uid="route" name="${currentRoute}" defaultsort="1"
		defaultorder="ascending" pagesize="10" class="dt">
		<display:column property="departureDate" title="Departure Date"
			maxLength="10" />
		<display:column property="estimatedArrivalDate"
			title="Estimated Arrival Date" maxLength="10" />
		<display:column property="arrivalDate" title="Arrival Date"
			maxLength="10" />
		<display:column property="transportValue" title="Transport Value"
			maxLength="10" />
		<display:column title="Harbours" maxLength="200">
			<c:forEach var="harbour" items="${route.harbours}">
				<c:out value="${harbour.name}" />&nbsp;
				</c:forEach>
		</display:column>
		<display:setProperty name="basic.empty.showtable" value="true" />
		<display:setProperty name="paging.banner.group_size" value="10" />
		<display:setProperty name="paging.banner.onepage"
			value="<span class='pagelinks'>&nbsp;</span>" />
	</display:table>

	<googlemaps:div id="map" scope="page"></googlemaps:div>
	<c:out value="Ship Route"></c:out>

	<googlemaps:initialize id="map" scope="page" />

	<googlemaps:map id="map" width="450" height="300" version="2"
		type="HYBRID" zoom="12">
		<googlemaps:key domain="localhost"
			key="ABQIAAAALUH_pcJpJzUxKa34zOTlrRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTGYWW_rjWc6kzdcZqyfYkFoYzyig" />
		<googlemaps:point id="point1" latitude="23" longitude="45" />
		<googlemaps:marker id="marker1" point="point1" />
	</googlemaps:map>
</body>
</html>
